<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initail-scale=1">
	<title>首页</title>
	<link rel="stylesheet" href="./adapter.css">
	<link rel="stylesheet" href="./normalize.css">
	<link rel="stylesheet" href="../static/css/iconfont.css">
	<style>
	/* 全局样式 */
	html,body {
		margin: 0;
		padding: 0;
	}
	ul,li,p {
		margin: 0;
		padding: 0;
	}
	a {
		text-decoration: none;
		color: #000;
	}
	li {
		list-style: none;
	}
	/*头部背景条*/
	.headerTop{
		width: 100%;
		height: 3rem;
		background-image: url(../static/imgs/4.jpg);
	}
	.headerTop a {
		color: #fff;
		font-size: 2.5rem;
		line-height: 3rem;
		position: absolute;
		left: 0;
		z-index: 999;
	}
	/* 头部商家信息 */
	.header {
		padding-top: 2.2rem;
		text-align: center;
		font-size: 0.8rem;
		position: relative;
	}
	.businessSign {
		position: absolute;
		right: 50%;
		top: 0;
		z-index: 999;
		transform: translate(50%,-50%);
		box-shadow: 0rem 0rem 0.5rem #888;
	}
	.businessSign img {
		width: 4rem;
		height: 4rem;
	}
	.header p:nth-of-type(2) {
		margin: 0.67rem 0;
	}
	.header-t span:nth-child(1) {
		font-size: 0.75rem;
		font-weight: 800;
		padding: 0 0.33rem;
		background-color: #f1da0d;
		border-radius: 1px;
	}
	.header-t span:nth-child(2) {
		margin: 0 0.67rem;
		font-size: 1.2rem;
		font-weight: 600;
	}
	.icon-right {
		font-size: 1.2rem;
	}
	.header-c span {
		margin: 0 0.33rem;
		color: #aaa;
	}
	.header-b {
		display: inline-block;
		border: 1px solid #ddd;
		padding: 0.33rem;
	}
	.header-b span:nth-child(1) {
		background: #26b53e;
		font-size: 0.67rem;
		color: #fff;
	}
	.header-b span:nth-child(2) {
		display: inline-block;
		width: 14rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: middle;
		margin: 0 0.33rem;
	}
	.option {
		width: 100%;
		height: 3rem;
		display: flex;
		border-bottom: 1px solid #ccc;
	}
	.option a {
		height: 100%;
		flex: 1;
		text-align: center;
		line-height: 3rem;
		color: #888;
		font-weight: 800;
	}
	.option span {
		display: inline-block;
		height: 100%;
		box-sizing: border-box;
	}
	/* 底部购物篮 */
	.footerbar {
		width: 100%;
		height: 3rem;
		background-color: #000;
		position: fixed;
		bottom: 0;
		display: flex;
		z-index: 999;
	}
	.footer {
		width: 100%;
		height: 100%;
	}
	.shopcaricon {
		width: 3.8rem;
		height: 3.8rem;
		border: 0.33rem solid #000;
		border-radius: 1.9rem;
		background-color: #26b53e;
		position: absolute;
		bottom: 0;
		left: 0.88rem;
		box-sizing: border-box;
	}
	.icon-gouwuche-tianchong {
		display: inline-block;
		font-size: 2.5rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
	}
	.shopcar {
		color: #fff;
		position: absolute;
		top: 50%;
		left: 5rem;
		transform: translateY(-50%);
	}
	.startprice {
		width: 6rem;
		height: 100%;
		background-color: #333;
		position: absolute;
		color: #fff;
		right: 0;
		top: 0;
		font-size: 0.88rem;
		font-weight: 800;
		text-align: center;
		line-height: 3rem;
	}
	.shopcar p:nth-of-type(1) {
		font-size: 1.3rem;
		font-weight: 800;
	}
	.shopcar p:nth-of-type(2) {
		font-size: 0.67rem;
		color: #aaa;
		line-height: 1rem;
	}

	</style>
</head>
<body>
	<!-- 头部背景条 -->
	<div class="headerTop">
		<a href="" class="iconfont icon-back"></a>
	</div>
	<!-- 头部商家信息 -->
	<div class="header">
		<div class="businessSign">
			<img src="../static/imgs/商标.jpg" alt="">
		</div>
			<p class="header-t"><span>品牌</span><span>城隍庙包子（保利水城）</span><span class="iconfont icon-right"></span></p>
			<p class="header-c">月售90单<span>·</span>硅谷专送<span>·</span>约28分钟<span>·</span>距离1000m</p>
			<p class="header-b"><span>首单</span><span>新用户下单立减17元(不与其他活动同时使用)</span><span>8个优惠</span><span class="iconfont icon-down"></span></p>
	</div>
	<div class="option">
		<a href=""><span>点餐</span></a>
		<a href=""><span>评价</span></a>
		<a href=""><span>商家</span></a>
	</div>
	<!-- 底部购物篮 -->
	<div class="footerbar">
		<a href="" class="footer">
			<div class="shopcaricon"><span class="iconfont icon-gouwuche-tianchong"></span></div>
			<div class="shopcar">
				<p>￥0</p>
				<p>配送费￥4元</p>
			</div>
			<div class="startprice">￥20元起送</div>
		</a>
	</div>
</body>
</html>